<template>
  <div class="goods">
    <div class="title-msg">我的类目</div>

    <div class="option-site">
      <div class="option-site-head"><span>类目列表</span></div>
      <div class="option-site-neck">
        <Neck :root-category="categoryListAndRecordInfo.root_navs"
              :root_category_id="categoryListAndRecordInfo.root_category_id"
              :name_describe="categoryListAndRecordInfo.name_describe"
              @screen="mScreen"
              @search="mSearch"
        ></Neck>
      </div>

      <div class="option-site-table">
        <Table :list="categoryListAndRecordInfo.page.list"
               :root-navs="categoryListAndRecordInfo.root_navs"
        ></Table>
        <Footer :count="categoryListAndRecordInfo.page.count"
                :total="categoryListAndRecordInfo.page.total"
                :index="categoryListAndRecordInfo.page.index"
                @pre="mPre"
                @next="mNext">
        </Footer>
      </div>

    </div>
  </div>
</template>

<script>
  import Footer from "./childComps/Footer";
  import Neck from "./childComps/Neck";
  import Table from "./childComps/Table";

  import {verToken} from 'common/utils'
  import {mapGetters} from 'vuex'

  import {getGoodsCategory} from 'network/mix'
  export default {
    name: "Category",
    components: {
      Footer,
      Neck,
      Table,
    },
    data() {
      return {
        categoryListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 0, // 总页数
            index: 1, // 当前页,默认第1页
          },
          id: 0, // 类目id
          name_describe: '', // 搜索的类目名、描述
          username: '', // 搜索的类目用户名
          root_category_id: 0, // 当前选中的主类目
          root_navs: [], // 主目录
        }
      }
    },
    created() {
      this.categoryListAndRecordInfo.username = verToken(this.token).username
      // console.log(this.categoryListAndRecordInfo.username);
    },
    mounted() {
      this.mGetGoodsCategory();
    },
    computed: {
      ...mapGetters ({
        token: 'getToken'
      })
    },
    methods: {

      /**axios网络请求*/
      mScreen({rci, nd}) { // 筛选商品类目
        getGoodsCategory(0, nd, this.categoryListAndRecordInfo.username, rci, 1)
          .then(result => {
            // console.log(result);
            this.categoryListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('goodsCategoryBus',{ // 通过事件总线发送事件,以使footer组件接收,实现筛选后还能使用footer进行上一页和下一页
              rci: rci,
              nd: nd,
            })
          })
          .catch(error => {
            console.log('筛选商品类目失败' + error);
          })
      },
      mSearch({rci, nd}) {
        getGoodsCategory(0, nd, this.categoryListAndRecordInfo.username, rci, 1)
          .then(result => {
            // console.log(result);
            this.categoryListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('goodsCategoryBus',{ // 通过事件总线发送事件,以使footer组件接收,实现筛选后还能使用footer进行上一页和下一页
              rci: rci,
              nd: nd,
            })
          })
          .catch(error => {
            console.log('搜索商品类目失败' + error);
          })
      },
      mGetGoodsCategory() { // 首次获取商品类目
        getGoodsCategory(0, '', this.categoryListAndRecordInfo.username, 0, 1)
          .then(res => {
            this.categoryListAndRecordInfo = res;
            // console.log(this.categoryListAndRecordInfo);
          })
        .catch(error => {
          console.log('获取商品类名失败' + error);
        })
      },
      mPre({rci, nd, i}) { // 点击上一页触发的网络请求
        getGoodsCategory(0, nd, this.categoryListAndRecordInfo.username, rci, i - 1)
          .then(res => {
            this.categoryListAndRecordInfo = res;
            // console.log(this.categoryListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取上一页商品类目失败' + error);
          })
      },
      mNext({rci, nd, i}) { // 点击下一页触发的网络请求
        getGoodsCategory(0, nd, this.categoryListAndRecordInfo.username, rci, i + 1)
          .then(res => {
            this.categoryListAndRecordInfo = res;
            // console.log(this.categoryListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取下一页商品类目失败' + error);
          })
      },
    }
  }
</script>

<style scoped>
  .goods {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    /*height: 980px;*/

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site-head {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;

    border-bottom: 1px solid #cdcdcd;
    background-color: rgb(23, 162, 184);/*F22E00*/

    color: white;
  }
  .option-site-neck {
    margin-left: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;

    border-bottom: 1px solid #cdcdcd;

    /*background-color: green;*/
  }

  .option-site-table {
    margin-left: 20px;
    margin-right: 20px;

    height: 70%;

    /*background-color: green;*/
  }
</style>